<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-19 09:38:35
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-08-17 16:55:06
 * @FilePath: \jzjypc4.0\src\views\HellpCenter\feedBack.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="bread">
      <span>当前位置：</span>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/personal' }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/personal/Custom' }">客服</el-breadcrumb-item>
        <el-breadcrumb-item>在线客服</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="top">
        <span></span>
        <h3>在线客服</h3>
      </div>
      <div class="title">
        <h2>点教在线小助手</h2>
      </div>
      <div class="container">
        <div class="main">
          <div class="box">
            <div id="content" class="content">
              <div v-for="(item, index) in info" :key="index">
                <div class="info_r info_default" v-if="item.type == 'leftinfo'">
                  <span class="circle circle_r">
                    <img src="../../assets/img/comPic.png" alt="" />
                  </span>
                  <div class="con_r con_text">
                    <div>{{ item.content }}</div>
                    <div v-for="(item2, index) in item.question" :key="index">
                      <div
                        class="con_que"
                        @click="clickRobot(item2.content, item2.id)"
                      >
                        <div class="czkj-question-msg">
                          {{ item2.index }}
                          {{ item2.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="time_r">{{ item.time }}</div>
                </div>

                <div class="info_l" v-if="item.type == 'rightinfo'">
                  <div class="con_r con_text">
                    <span class="con_l">{{ item.content }}</span>
                    <span class="circle circle_l">
                      <img src="../../assets/img/comPic.png" alt="" />
                    </span>
                  </div>
                  <div class="time_l">{{ item.time }}</div>
                </div>
              </div>
            </div>
            <div class="setproblem">
              <textarea
                placeholder="请简要描述下您遇到的问题~..."
                style="
                  height: 68px;
                  width: 100%;
                  resize: none;
                  padding-right: 80px;
                  outline: none;
                  border-color: #ccc;
                  border-radius: 5px;
                "
                id="text"
                v-model="customerText"
                @keyup.enter="sentMsg()"
              ></textarea>
              <button @click="sentMsg()" class="setproblems">
                <span style="vertical-align: 4px">发 送</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import activeDetailsVue from '../ActiveCenter/activeDetails.vue';
export default {
  data() {
    return {
      customerText: "",//用户输入框内容
      info: [
        {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content:
            "欢迎您访问精准教研教学平台！我是您的在线智能小助手！有什么问题，可以尽管问我哦！",
          question: [],
        },
      ],
      timer: null,
      robotQuestion: [ //机器人回复的快捷问答
        { id: 1, content: "为什么账号登录不上去", index: 1 },
        { id: 2, content: "怎么修改学科", index: 2 },
        { id: 3, content: "怎样修改身份 ", index: 3 },
        {
          id: 4,
          content: "注册网站时需要一次填写完所有的客户资料吗",
          index: 4,
        },
        { id: 5, content: "注册时使用的手机号变更怎么办", index: 5 },
      ],
      robotAnswer: [
        {
          id: 1,
          content:
            "点击平台右上角--个人中心--切换学科",
          index: 1,
        },
        { id: 2, content: "不知道", index: 2 },
        { id: 3, content: "不知道", index: 3 },
        {
          id: 4,
          content: "不知道",
          index: 4,
        },
        { id: 5, content: "我也不知道", index: 5 },
      ],
    };
  },
  created() {
    this.showTimer();
  },
  watch: {},
  methods: {
    // 用户发送消息
    sentMsg() {
      clearTimeout(this.timer);
      this.showTimer();
      let text = this.customerText.trim();
      if (text != "") {
        var obj = {
          type: "rightinfo",
          time: this.getTodayTime(),
          content: text,
        };
        this.info.push(obj);
        this.appendRobotMsg(this.customerText);
        this.customerText = "";
        this.$nextTick(() => {
          var contentHeight = document.getElementById("content");
          contentHeight.scrollTop = contentHeight.scrollHeight;
          
        });
      }
    },
    // 机器人回答消息
    appendRobotMsg(text) {
      clearTimeout(this.timer);
      this.showTimer();
      text = text.trim();
      let answerText = "";
      let flag;
      for (let i = 0; i < this.robotAnswer.length; i++) {
        if (this.robotAnswer[i].content.indexOf(text) != -1) {
          flag = true;
          answerText = this.robotAnswer[i].content;
          break;
        }
      }
      if (flag) {
        let obj = {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content: answerText,
          question: [],
        };
        this.info.push(obj);
      } else {
        answerText = "您可能想问：";
        let obj = {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content: answerText,
          question: this.robotQuestion,
        };
        this.info.push(obj);
      }
      this.$nextTick(() => {
        var contentHeight = document.getElementById("content");
        contentHeight.scrollTop = contentHeight.scrollHeight;
      });
    },
    sentMsgById(val, id) {
      clearTimeout(this.timer);
      this.showTimer();

      let robotById = this.robotAnswer.filter((item) => {
        return item.id == id;
      });
      let obj_l = {
        type: "leftinfo",
        time: this.getTodayTime(),
        name: "robot",
        content: robotById[0].content,
        question: [],
      };
      let obj_r = {
        type: "rightinfo",
        time: this.getTodayTime(),
        name: "robot",
        content: val,
        question: [],
      };
      this.info.push(obj_r);
      this.info.push(obj_l);
      this.$nextTick(() => {
        var contentHeight = document.getElementById("content");
        contentHeight.scrollTop = contentHeight.scrollHeight;
      });
    },
    // 点击机器人的单个问题
    clickRobot(val, id) {
      this.sentMsgById(val, id);
    },
    // 结束语
    endMsg() {
      let happyEnding = {
        type: "leftinfo",
        time: this.getTodayTime(),
        content: "退下吧",
        question: [],
      };
      this.info.push(happyEnding);
      this.$nextTick(() => {
        var contentHeight = document.getElementById("content");
        contentHeight.scrollTop = contentHeight.scrollHeight;
      });
    },
    showTimer() {

      this.timer = setTimeout(this.endMsg, 1000 * 60);
    },
    // 获取当前时间
    getTodayTime() {
      var day = new Date();
      let seconds = day.getSeconds();
      
      if (seconds < 10) {
        seconds = "0" + seconds;
      } else {
        seconds = seconds;
      }
      let minutes = day.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      } else {
        minutes = minutes;

      }
      let time = 
        day.getFullYear() +
        "-" +
        (day.getMonth() + 1) +
        "-" +
        day.getDate() +
        " " +
        day.getHours() +
        ":" +
        minutes +
        ":" +
        seconds;
      return time;
    },
  },
  // mounted() {},
  // props: {},
  // destroyed() {},
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator{
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  height: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  .bread {
    display: flex;
    margin: 10px auto;
    width: 1200px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #626366;
    line-height: 24px;
    .el-breadcrumb {
      font-size: 14px;
      line-height: 24px;
      /deep/.el-breadcrumb__item:last-child {
        .el-breadcrumb__inner {
          color: #08a579;
        }
      }
    }
  }
  .content {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    background-color: #fff;
    overflow: hidden;
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .title {
      h2 {
        margin: 0 auto;
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        width: 1120px;
        color: #333333;
        font-size: 16px;
        background: #f0f2f5;
        border: 1px solid #dee0e3;
    border-bottom: 0;
      }
    }
    .main {
      width: 100%;
      // height: 100vh;
      background: linear-gradient(
        180deg,
        rgba(149, 179, 212, 1) 0%,
        rgba(74, 131, 194, 1) 100%
      );
      //   overflow: hidden;
      .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 660px;
        background-color: #fff;
        position: relative;
        #content {
          flex: 1;
          padding-top: 20px;
          margin: 0 auto;
          font-size: 14px;
          width: 1140px;
          overflow-y: scroll;
          background-color: #fafafa;
          border: 1px solid #dee0e3;
          border-bottom: 0;
          .info_default {
              margin-bottom: 30px;
          }
          .circle {
            display: inline-block;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #eff1f3;
          }
          .con_text {
            margin-left: 20px;
            color: #333;
            margin-bottom: 5px;
          }
          .con_que {
            color: #1c88ff;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
          }
          .info_r {
            .circle_r {
              position: relative;
              top: 30px;
              margin-left: 20px;
              width: 60px;
              height: 60px;
              border-radius: 30px;
              img {
                width: 60px;
                height: 60px;
                border-radius: 30px;
              }
            }
            .con_r {
              display: inline-block;
              //   min-height: 55px;
              //   border-radius: 6px;
              //   padding: 10px;
              //   margin-left: 40px;
            }
            .time_r {
                margin-top: 15px;
              margin-left: 100px;
              color: #999999;
              font-size: 12px;
            }
          }
          .info_l {
            text-align: right;
            // margin-right: 20px;
            color: #ffffff;
            color: #08a579;
            margin-top: 10px;

            // .circle_l {
            //   // vertical-align: -10px;
            // }
            .circle_l {
              position: relative;
              top: 30px;
              margin-right: 20px;
              width: 60px;
              height: 60px;
              border-radius: 30px;
              img {
                width: 60px;
                height: 60px;
                border-radius: 30px;
              }
            }
            .time_l {
              margin-right: 108px;
              color: #999999;
              font-size: 12px;
              margin-top: 15px;
            }
            .con_l {
              display: inline-block;
              //   background-color: #3163c5;
              border-radius: 6px;
              padding: 10px;
              text-align: right;
              color: #646566;
              margin-right: 20px;
            }
          }
          #question {
            cursor: pointer;
          }
        }
        #content::-webkit-scrollbar {
          width: 0; /*隐藏滚动条*/
        }
      }
    }
    .setproblem {
      margin: 0 auto;
      width: 1140px;
      height: 100px;
      background-color: #ffffff;
      border: 1px solid #dee0e3;
      position: relative;
    }
    .setproblem textarea {
      color: #333;
      padding: 10px;
      box-sizing: border-box;
      border: 0;
    }
    .setproblem button {
      position: absolute;
      right: 20px;
      bottom: 3px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      border: none;
    }

    .czkj-item-title {
      line-height: 25px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
      margin-bottom: 5px;
    }

    .czkj-item-question {
      cursor: pointer;
      display: block;
      padding: 8px;
      position: relative;
      border-bottom: 1px dashed #ccc;
      line-height: 20px;
      min-height: 20px;
      overflow: hidden;
    }

    .czkj-question-msg {
      float: left;
      font-size: 14px;
      color: #08a579;
    }
  }
}
</style>
